
<template>
  <div>
    <div class="main">
      <div class="split"></div>
      <h3 class="special-car-title">您想要的豪华车型应有尽有，满足你的不同场景需求</h3>
      <ul class="special-car-types">
        <li class="special-car-types-item">
          <div class="special-car-types-item-img"><img src="../../assets/images/1.648b924f.jpg"
                 alt="豪华车租赁"><span class="special-car-types-item-type">豪华车租赁</span></div>
          <h4 class="special-car-types-item-title">自驾出行</h4>
          <p>让你享受不同豪车自驾体验，</p>
          <p>享受来自超跑的自由驾驶乐趣</p>
        </li>
        <li class="special-car-types-item">
          <div class="special-car-types-item-img"><img src="../../assets/images/2.6f36551b.jpg"
                 alt="高端商务车租赁"><span class="special-car-types-item-type">高端商务车租赁</span></div>
          <h4 class="special-car-types-item-title">商务接驾</h4>
          <p>高端豪华车型满足你高端接待需求，</p>
          <p>助您成功更近一步。</p>
        </li>
        <li class="special-car-types-item">
          <div class="special-car-types-item-img"><img src="../../assets/images/3.cf98980a.jpg"
                 alt="高端婚车租赁"><span class="special-car-types-item-type">高端婚车租赁</span></div>
          <h4 class="special-car-types-item-title">豪华婚车</h4>
          <p>提供高端婚庆用车，</p>
          <p>满足您高端奢华婚礼定制需求。</p>
        </li>
      </ul>
    </div>
    <div class="main">
      <div class="split"></div>
      <h3 class="special-car-title">支持全国主流城市 各种豪车供您选择</h3>
      <div class="special-car-brands"><span class="special-car-brands-title">品牌</span><button class="shortrent-button shortrent-button-active">不限</button><button class="shortrent-button">路特斯</button><button class="shortrent-button">迷你</button><button class="shortrent-button">奥迪</button><button class="shortrent-button">雷克萨斯</button><button class="shortrent-button">Smart</button><button class="shortrent-button">保时捷</button><button class="shortrent-button">领克</button><button class="shortrent-button">兰博基尼</button><button class="special-car-brands-all special-car-brands-arrow">全部</button></div>
    </div>
    <div class="main">
      <div class="vm-image-list">
        <!-- 搜索和分页区域 -->
        <Row class="image-list-heading vm-panel">
          <Row type="flex"
               align="middle"
               justify="space-between"
               class="panel-body">
            <div class="search-bar">
              <Input placeholder="Please enter ..."
                     v-model="keyword"
                     style="width: 300px;margin-right:20px"></Input>
              <Button type="default"
                      @click="search">搜索</Button>
            </div>
            <Row type="flex"
                 align="middle"
                 class="page">
              <span>Show</span>
              <Input :max="20"
                     :min="1"
                     :number="true"
                     v-model="showNum"
                     class="input-number"
                     @on-change=" updateDataShow "></Input>
              <span class="margin-end">/ Page</span>
              <span class="total">Total {{ data.length }}</span>
              <Page :total="data.length"
                    :current="currentPage"
                    :page-size="showNum"
                    @on-change="pageChange"></Page>
            </Row>
          </Row>
        </Row>
        <!-- 汽车信息区域 -->
        <Row class="image-list"
             :gutter="16">
          <Col :lg="6"
               :sm="12"
               class="vm-margin"
               v-for="item in dataShow"
               :key="item.carId">
          <div class="shortrent-cars clearfix">
            <div class="com-car-card card"><a :href="item.carHref"
                 class="thumbnail"><img :src="item.carImgSrc"
                     :alt="item.carAlt"></a>
              <div class="content">
                <h3 class="title"><a :href="carHref">{{item.carAlt}}</a></h3>
                <p class="desc">
                  <!-- --> <span>{{item.carScore}}
                    <!-- -->分
                  </span>
                </p>
                <p class="price"><span>{{item.carPrice}}</span>元/天</p>
              </div>
            </div>
          </div>
          </Col>
        </Row>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'personalityRent',
  props: {
    // origin data
    data: {
      type: Array,
      default: function () {
        return [
          {
            carHref: '/cardetail/Panamera',
            carImgSrc: '//carphoto.atzuche.com/2car/20/11/16272939/1606533489315_1.jpg',
            carAlt: '保时捷 Panamera 3.0T 自动挡',
            carScore: '5.0',
            carPrice: '1671'
          },
          {
            carHref: '/cardetail/MODEL_X',
            carImgSrc: '//carphoto.atzuche.com/2car/20/12/670837282/1611537499871_1.jpg',
            carAlt: '特斯拉 MODEL X 0.0L 自动挡',
            carScore: '5.0',
            carPrice: '1745'
          },
          {
            carHref: '/cardetail/16272939',
            carImgSrc: '//carphoto.atzuche.com/2car/20/11/16272939/1606533489315_1.jpg',
            carAlt: '保时捷 Panamera 3.0T 自动挡',
            carScore: '5.0',
            carPrice: '1671'
          },
          {
            carHref: '/cardetail/670837282',
            carImgSrc: '//carphoto.atzuche.com/2car/20/12/670837282/1611537499871_1.jpg',
            carAlt: '特斯拉 MODEL X 0.0L 自动挡',
            carScore: '5.0',
            carPrice: '1745'
          },
          {
            carHref: '/cardetail/16272939',
            carImgSrc: '//carphoto.atzuche.com/2car/20/11/16272939/1606533489315_1.jpg',
            carAlt: '保时捷 Panamera 3.0T 自动挡',
            carScore: '5.0',
            carPrice: '1671'
          },
          {
            carHref: '/cardetail/670837282',
            carImgSrc: '//carphoto.atzuche.com/2car/20/12/670837282/1611537499871_1.jpg',
            carAlt: '特斯拉 MODEL X 0.0L 自动挡',
            carScore: '5.0',
            carPrice: '1745'
          },
          {
            carHref: '/cardetail/16272939',
            carImgSrc: '//carphoto.atzuche.com/2car/20/11/16272939/1606533489315_1.jpg',
            carAlt: '保时捷 Panamera 3.0T 自动挡',
            carScore: '5.0',
            carPrice: '1671'
          },
          {
            carHref: '/cardetail/670837282',
            carImgSrc: '//carphoto.atzuche.com/2car/20/12/670837282/1611537499871_1.jpg',
            carAlt: '特斯拉 MODEL X 0.0L 自动挡',
            carScore: '5.0',
            carPrice: '1745'
          },
          {
            carHref: '/cardetail/16272939',
            carImgSrc: '//carphoto.atzuche.com/2car/20/11/16272939/1606533489315_1.jpg',
            carAlt: '保时捷 Panamera 3.0T 自动挡',
            carScore: '5.0',
            carPrice: '1671'
          },
          {
            carHref: '/cardetail/670837282',
            carImgSrc: '//carphoto.atzuche.com/2car/20/12/670837282/1611537499871_1.jpg',
            carAlt: '特斯拉 MODEL X 0.0L 自动挡',
            carScore: '5.0',
            carPrice: '1745'
          },
          {
            carHref: '/cardetail/16272939',
            carImgSrc: '//carphoto.atzuche.com/2car/20/11/16272939/1606533489315_1.jpg',
            carAlt: '保时捷 Panamera 3.0T 自动挡',
            carScore: '5.0',
            carPrice: '1671'
          },
          {
            carHref: '/cardetail/670837282',
            carImgSrc: '//carphoto.atzuche.com/2car/20/12/670837282/1611537499871_1.jpg',
            carAlt: '特斯拉 MODEL X 0.0L 自动挡',
            carScore: '5.0',
            carPrice: '1745'
          },
          {
            carHref: '/cardetail/16272939',
            carImgSrc: '//carphoto.atzuche.com/2car/20/11/16272939/1606533489315_1.jpg',
            carAlt: '保时捷 Panamera 3.0T 自动挡',
            carScore: '5.0',
            carPrice: '1671'
          },
          {
            carHref: '/cardetail/670837282',
            carImgSrc: '//carphoto.atzuche.com/2car/20/12/670837282/1611537499871_1.jpg',
            carAlt: '特斯拉 MODEL X 0.0L 自动挡',
            carScore: '5.0',
            carPrice: '1745'
          },
          {
            carHref: '/cardetail/16272939',
            carImgSrc: '//carphoto.atzuche.com/2car/20/11/16272939/1606533489315_1.jpg',
            carAlt: '保时捷 Panamera 3.0T 自动挡',
            carScore: '5.0',
            carPrice: '1671'
          },
          {
            carHref: '/cardetail/670837282',
            carImgSrc: '//carphoto.atzuche.com/2car/20/12/670837282/1611537499871_1.jpg',
            carAlt: '特斯拉 MODEL X 0.0L 自动挡',
            carScore: '5.0',
            carPrice: '1745'
          },
          {
            carHref: '/cardetail/16272939',
            carImgSrc: '//carphoto.atzuche.com/2car/20/11/16272939/1606533489315_1.jpg',
            carAlt: '保时捷 Panamera 3.0T 自动挡',
            carScore: '5.0',
            carPrice: '1671'
          },
          {
            carHref: '/cardetail/670837282',
            carImgSrc: '//carphoto.atzuche.com/2car/20/12/670837282/1611537499871_1.jpg',
            carAlt: '特斯拉 MODEL X 0.0L 自动挡',
            carScore: '5.0',
            carPrice: '1745'
          },
          {
            carHref: '/cardetail/16272939',
            carImgSrc: '//carphoto.atzuche.com/2car/20/11/16272939/1606533489315_1.jpg',
            carAlt: '保时捷 Panamera 3.0T 自动挡',
            carScore: '5.0',
            carPrice: '1671'
          },
          {
            carHref: '/cardetail/670837282',
            carImgSrc: '//carphoto.atzuche.com/2car/20/12/670837282/1611537499871_1.jpg',
            carAlt: '特斯拉 MODEL X 0.0L 自动挡',
            carScore: '5.0',
            carPrice: '1745'
          }
        ]
      }
    }
  },
  data: function () {
    return {
      keyword: '', // keyword for search
      dataShow: [], // data for showing
      showNum: 8, // number of item per page
      currentPage: 1
    }
  },
  methods: {
    updateDataShow: function () {
      const startPage = (this.currentPage - 1) * this.showNum
      const endPage = startPage + this.showNum
      this.dataShow = this.data.slice(startPage, endPage)
    },
    pageChange: function (page) {
      this.currentPage = page
      this.updateDataShow()
    },
    search: function () {
      const that = this
      const tempData = that.data
      that.dataShow = []
      tempData.forEach(function (elem) {
        for (const i in elem) {
          if (elem[i].toString().indexOf(that.keyword) > -1) {
            that.dataShow.push(elem)
            return
          }
        }
      })
    }
  },
  watch: {
    data: function () {
      this.dataShow = this.data.slice(0, this.showNum) // update dataShow once data changed
    }
  },
  mounted: function () {
    this.dataShow = this.data.slice(0, this.showNum)
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/css/style.css';
</style>
